<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>油卡充值</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<!-- weui加载 -->
<link rel="stylesheet" href="${base}/static/css/recharge.css">
<script src="${base}/static/js/jquery-2.1.4.min.js"></script>
<script src="${base}/static/js/RechargeOilCard.js"></script>
<script type="text/javascript" src="${base }/static/js/layer/layer.js"></script>
<style>
.gastype{width: 44%;float:left;border: 1px solid #E8E6E6;height: 38px;text-align: center;font-size: 16px;line-height: 38px;color: #333333;border-radius: 5px;background: #fff;}
.gasselected{border: 1px solid #65BB0A;color: #fff;background: #65BB0A;}
.head-back{float: left;margin-left:3%; }
.head-title{width: 100px;height: 38px; margin: 0 auto;font-family:'黑体';font-size: 16px;}
#marquee2 {
                font-weight: bolder;
                font-size: 12px;
                color:black;
                background: transparent;
                position: fixed;
                top: 5px;
                z-index: 1px;
                width: 100%;
                height: 20px;
                line-height: 20px;
                border-radius: 5px;
                background-color:yellow;
                /*opacity:0.5;
                filter:alpha(opacity=70);*/
            }
#marquee1 {
                font-weight: bolder;
                font-size: 12px;
                color:black;
                background: transparent;
                position: fixed;
                top: 5px;
                z-index: 1px;
                width: 100%;
                height: 20px;
                line-height: 20px;
                border-radius: 5px;
                background-color:green;
                /*opacity:0.5;
                filter:alpha(opacity=70);*/
            }
</style>
</head>
<body ontouchstart class="weui-wepay-pay-wrap">
<c:if test="${RechargeStates ==2 }">
	<marquee id="marquee2" direction="left">系统充值时间为:9:00-18:00,请注意充值!</marquee>
</c:if>
<c:if test="${RechargeStates ==1 }">
	<marquee id="#marquee1" direction="left">尊敬的客户，中翰云油公众号已经上线，请在充值成功后记得关注我们的公众号，及时查看订单情况，谢谢</marquee>
</c:if>

<div class="body fui-page"  style="overflow: auto">

    <div class="center">
    	<div style="width:100%;display:none;height:38px;line-height:38px;font-size:15px;color:#333333;text-align:center;background:#F7F7F7;" id="goback" >
    		<div class="head-back"><b>〈</b></div>
        	<div class="head-title">充油</div>
    	</div>
    	<c:if test="${ImgUrl == null}">
    		<div class="lbtu">
		        <img src="${base}/static/img/cardpic.jpg">
		    </div>
    	</c:if>
    	<c:if test="${ImgUrl != null}">
    		<div class="lbtu">
		        <img src="${base}${ImgUrl}">
		    </div>
    	</c:if>
    	
    	<c:if test="${Activity !=null }">
			<div style="text-align: center;height: 15px;"><img alt="notice" src="${base}/static/img/notice.png"> <a href="${base }${Activity.activityUrl }"><b style="color:red;font-size: 15px;">${Activity.activityName }</b><span style="color:#FF4500">&nbsp;详细请点击链接查看</span></a></div>
    	</c:if>
    	
	    <form id="recard_form">
		<!-- 油卡页面 -->
	    <div class="main">
	        <div class="blk5" style="border-bottom: 0 !important;" id="gas_card_first">
	          <span>
	          	<input type="hidden" id="openid" name="openid" value="${SnsUserInfo.openId }">
	          	<input type="hidden" name="nickname" value="${SnsUserInfo.nickname }">
	            <input type="number" class="recharge" name='gasnumber' onfocus="$('#gasnumber_prompt').hide();$('#rtprompt').hide()" value="" id="gasnumber" placeholder="请输入油卡卡号" />
	            <span id="gasnumber_prompt" style="display: none;color: red;font-size: 12px;">请输入卡号</span>
	            <input type="text" class="recharge" name='gasname' onfocus="$('#gasname_prompt').hide();$('#rtprompt').hide()" value="" id="gasname" placeholder="请输入持卡人姓名" />
	            <span id="gasname_prompt" style="display: none;color: red;font-size: 12px;">请输入正确的姓名</span>
	            <input type="number" class="recharge" name='gasphone' onfocus="$('#gasphone_prompt').hide();$('#rtprompt').hide();" value="" id="gasphone" placeholder="请输入持卡人手机号" />
	            <span id="gasphone_prompt" style="display: none;color: red;font-size: 12px;">请输入正确的手机号</span>
	            <!-- 0 中石油 1 中石化 -->
	            <input type="hidden" name="gastype" value="">
	            <div style="width: 100%;margin-top: 10px;margin-bottom:10px;">
	            	<div class="gastype" id="PetroChina" onclick="PetroChina()" >中石油</div>
	            	<div style="width: 10%;float: left;height: 38px;"></div>
	            	<div class="gastype" id="Sinopec" onclick="Sinopec()">中石化</div>
	            </div>	
	            <div style="width: 100%;text-align: center;display: none;color: red;font-size: 12px;" id="gastype_prompt">请选择充值类型</div>            
	          </span>
	        </div>
	    </div>
	    <!-- 充值卡页面 -->
	    <div class="main" style="display:none;" id="gas_card_next">
	        <div class="blk5" style="border-bottom:0 !important;">
	        	<input type="number" class="recharge"  name='recardno' value=""  id="recardno" placeholder="请输入充值卡序列号" onfocus="$('#recardno_prompt').hide()" />
	        	<span id="recardno_prompt" style="display: none;color: red;font-size: 12px;">卡号不能为空</span>
	            <input type="number" class="recharge"  name='password' value="" id="password" onfocus="$('#password_prompt').hide()" placeholder="请输入充值卡密码" />
	            <span id="password_prompt" style="display: none;color: red;font-size: 12px;">密码不能为空</span>
	        </div>
	    </div>
	    
	    </form>
		<div style="margin: 15px">
			<p>重要提示：加油卡完成网上充值后，需到所充值油卡当地加油站请工作人员进行激活（圈存）操作，否则充值金额将无法生效。</p>
			<p style="color: red;font-size:14px;width: 100%;text-align:center;display:none;" id="rtprompt">
				您输入的信息有误，请重新输入
			</p>
	    	<input type="button" onclick="Gascardnext()" id="gas_first_button" class="order" style="position:fixed;bottom: 10px;" value="下一步"/>
	    	<input onclick="Gasrecharge()" id="gas_next_button" style="display: none; position:fixed;bottom: 10px;" type="button" class="order" value="充值"/>
		    
		</div>
		
		<div class="pay" id="jump" style="position: fixed;bottom: 0;">

		</div>
    </div>

</div>

</body>
</html>